<template>
  <div class="benefit">
      <div>
        <p>
            <span>{{$t("index.benefit")}}</span>
            {{amount}}WSC
        </p>
        <img src="../assets/img/benefit.png" alt="">
      </div>
  </div>
</template>

<script>
export default {
    props:['amount']
}
</script>

<style lang="scss" scoped>
.benefit{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.4);
    >div{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: show .3s;
        img{
            position: absolute;
            height: 1.01rem;
            width: 1.73rem;
            top: 43%;
            left: 50%;
            transform: translate(-50%,0);
        }
        p{
            color: #fff;
            position: absolute;
            width: 100%;
            text-align: center;
            top: 42%;
            left: 50%;
            transform: translate(-50%,0);
            font-size: .16rem;
            span{
                font-weight: bold;
                color: #FECF37;
            }
        }
    }
}
@keyframes show {
    0%{
        transform: scale(.5);
    }
    100%{
        transform: scale(1);
    }
}
</style>